// 一、渲染学生列表
// 获取元素
const table = document.querySelector('.list')
const total = document.querySelector('.total')
// 包装一个渲染函数
const getStudentList = async () => {
  const res = await axios({ url: '/students' })
  const htmlStr = res.data
    .map((item) => {
      return `
    <tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender ? '男' : '女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"
        ><i class="bi bi-pen" data-id="${item.id}"></i
      ></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
    </td>
  </tr>`
    })
    .join('')

  table.innerHTML = htmlStr
  total.innerHTML = res.data.length
}

getStudentList()

// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
// 获取form元素
const form = document.querySelector('#form')
// 获取提交按钮
const submitBtn = document.querySelector('#submit')




// 添加模态框的城市
const initCity = async () => {
  // 添加省份 获取接口省份数据
  const res = await axios({ url: '/api/province' })
  const provinceStr = res.data
    .map((item) => {
      return `
    <option value="${item}">--${item}--</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`

  ps.addEventListener('change', async () => { 
    if (!ps.value) return
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`
    const res = await axios({ url: '/api/city', params: { pname: ps.value } })
    const cityStr = res.data
    .map((item) => {
      return `
    <option value="${item}">--${item}--</option>`
    })
      .join('')
    
    // 
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    cs.addEventListener('change', async () => { 
      if (!cs.value) return
      as.innerHTML = `<option value="">--地区--</option>`
      const res = await axios({ url: '/api/area', params: { pname: ps.value ,cname:cs.value} })
      const areaStr = res.data?.map((item) => {
        return `
      <option value="${item}">--${item}--</option>`
      })
      .join('')
    as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    })
  })
}
initCity()



// 弹出模态框  点击＋号弹出
const addBtn = document.querySelector('#openModal')
addBtn.addEventListener('click', () => {
  form.reset()
  modalBox.dataset.id = 'add'
  modalBox.querySelector('.modal-title').innerHTML = '添加学员'
  modal.show()
})



// 提交按钮绑定事件
submitBtn.addEventListener('click', async function () {
  console.log(modalBox.dataset.id)
  const data = serialize(form, { hash: true })
  // 限制输入空得内容
  if (!data.name) return alert('姓名不能为空')
  if (!data.age) return alert('年龄不能为空')
  if (!data.hope_salary) return alert('期望薪资不能为空')
  if (!data.salary) return alert('薪资不能为空')
  if (!data.group) return alert('组号不能为空')
  if (!data.province) return alert('省份不能为空')
  if (!data.city) return alert('城市不能为空')
  if (!data.area) return alert('地区不能为空')
  if (data.group < 1 || data.group > 8) return alert('组号只能是1-8')
  // 判断改性别，传参给后端
  modalBox.querySelector('#cb01').checked ? data.gender = 1 : data.gender =0
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  // 限制组号
  
  

  // 判断打开的是哪个模态框 去哪个请求
  if (modalBox.dataset.id === 'add') {
    try {
      const res = await axios({ url: '/students', method: 'POST', data })
     //  关闭modal层
      modal.hide()
     //  添加完渲染一下列表
      getStudentList()
      alert(res.message)
    } catch (error) {
     alert(error)
    }
  }
  // 修改学生请求
  else {
    try {
      const res = await axios({ url: '/students/' + modalBox.dataset.id, method: 'PUT', data })
    console.log(res)
    //  关闭modal层
    modal.hide()
    //  添加完渲染一下列表
     getStudentList()
     alert(res.message)
    } catch (error) {
      alert(error)
    }
  }
})



// 事件委托
table.addEventListener('click', async function (e) {
  // console.log(e.target.classList.contains('bi-pen'))

  // 判断点击的是编辑还是删除
  if (e.target.classList.contains('bi-pen')) {
    console.log('我是编辑功能')
    // 给id拿个变量存起来
    const id = e.target.dataset.id
    // 发起请求  ：是动态请求 动态加参数
    const res = await axios({ url: '/students/' + id })


  //  获取所有name属性元素
    const nodeList = modalBox.querySelectorAll('[name]') 
    nodeList.forEach(item => {

      // 判断性别
      if (item.name === 'gender') {
        res.data[item.name]? modalBox.querySelector('#cb01').checked = true : modalBox.querySelector('#cb02').checked = true
      }

      // 遍历把每个name属性的value都赋值
      item.value = res.data[item.name]
    })

    // 给城市下拉框选项
    const { data: cityData } = await axios({ url: '/api/city', params: { pname: res.data.province } })

    // 渲染
    const cityStr = cityData
    .map((item) => {
      return `
    <option value="${item}">--${item}--</option>`
    })
    .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    // 给城市赋一个初始值
    cs.value = res.data.city

     // 给地区下拉框选项
    const { data: areaData } = await axios({ url: '/api/area', params: { pname: res.data.province, cname: res.data.city } })

    // 渲染地区
    const areaStr = areaData?.map((item) => {
      return `
    <option value="${item}">--${item}--</option>`
    })
      .join('')
    
    as.innerHTML = `<option value="">--地区--</option>${areaStr}` 

    // 给地区赋一个初始值
    as.value = res.data.area
    // 给modal层添加一个自定义属性便于后面判断到底是添加还是修改   属性值给id
    modalBox.dataset.id = id  
    modalBox.querySelector('.modal-title').innerHTML = '修改学员信息'
    // 打开modal层
    modal.show()
  }

  // 判断是不是删除
  if (e.target.classList.contains('bi-trash')) {
    // todo
    const id = e.target.dataset.id
    await axios({ url: '/students/' + id, method: 'DELETE', })
    //  添加完渲染一下列表
    getStudentList()
    alert('删除成功')
  }
})


